<script lang="ts" setup>
import { defineProps } from 'vue'

defineProps({
    title: {
        type: String,
        default: ''
    },
    isShowTitleArea: {
        type: Boolean,
        default: true
    }
})
</script>

<template>
    <div class="full-w">
        <div class="full-w row-normal">
            <span class="block flex-shrink-0"></span>
            <span class="flex-grow-1 line"></span>
            <span class="block flex-shrink-0"></span>
        </div>
        <div class="full-w">
            <!-- 表头 -->
            <div class="full-w row-normal">
                <span v-if="isShowTitleArea" class="font-size-12 m-l-10 m-r-10 m-t-10 full-w-0 p-a-3 title-backgroud row-normal">
                    <span class="flex-grow-1">{{ title }}</span>
                    <span>
                        <slot name="header"></slot>
                    </span>
                </span>
                <span v-else class="font-size-12 m-l-10 m-r-10 m-t-10 full-w-0 p-a-3 row-normal">
                    <span class="flex-grow-1">
                        <slot name="header"></slot>
                    </span>
                </span>
            </div>
            <!-- 主体 -->
            <div class="full-w row-normal">
                <div class="m-l-10 m-r-10 m-t-5 main-backgroud full-w">
                    <slot name="main"></slot>
                </div>
            </div>
        </div>
    </div>
</template>   

<style lang="stylus" scoped>
@import "stylus-px2rem";
@import url('@/css/normal.styl');
@import url('@/css/sepTitle.styl');
  
</style>